

<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
	<link rel="stylesheet" href="bootstrap-3.4.1/css/bootstrap.min.css">
    <style>
        .navbar {
            border-radius: 0;
        }
    </style>
    <script src="js/vue.js"></script>
    <script src="js/axios.js"></script>
<!--    <script src="js/elementUI.js"></script>-->
    <script src="js/jquery-3.6.0.min.js"></script>
    <script src="bootstrap-3.4.1/js/bootstrap.min.js"></script>

</head>
<body>
<br>
<div id="app">
    <div class="container">
        <div style="margin-bottom: 10px" class="clearfix">


            <form class="form-inline">
                <div class="form-group">
                    <label for="exampleInputName2" >真实姓名：</label>
                    <input v-model="query.realName" type="text" class="form-control" id="exampleInputName2" placeholder=" ">
                </div>
                <div class="form-group">
                    <label for="exampleInputEmail2">用户状态：</label>
                    <select class="form-control" v-model="query.userState">
                        <option value="">全部</option>
                        <option :value="0">启用</option>
                        <option :value="1">禁用</option>

                    </select>
                </div>
            </form>

        </div>
        <div class="panel panel-default">
            <!-- Default panel contents -->
            <div class="panel-heading">
                <span class="glyphicon glyphicon-th-list" aria-hidden="true"></span>
                用户列表
            </div>

            <!-- Table -->
            <table class="table table-bordered">
                <thead>
                <tr>
                    <th>用户名</th>
                    <th>真实姓名</th>
                    <th>用户类型</th>
                    <th>状态</th>
                    <th>操作</th>
                </tr>
                </thead>
                <tbody>

                <tr v-for="emp in tableData">
                    <th>{{emp.userName}}</th>
                    <th><input type="text" class="form-control" placeholder="" :value="emp.realName"></th>
                    <th>{{emp.userRole}}</th>
                    <th>{{emp.userState==0?'启用':'禁用'}}</th>
                    <td>
                        <button   class="btn btn-primary btn-xs" data-toggle="modal" data-target="#edit" @click="upt(emp)">修改真名</button>

                        <button v-if="emp.userRole=='普通管理员' && emp.userState== 0 " class="btn btn-danger btn-xs"  @click="totypeone(emp.id)">启用</button>
                        <button v-if="emp.userRole=='普通管理员' && emp.userState== 1 " class="btn btn-danger btn-xs"  @click="totypetwo(emp.id)">禁用</button>
                    </td>
                </tr>



                </tbody>
            </table>
        </div>

        <div class="modal fade" id="edit" tabindex="-1" role="dialog" aria-labelledby="edit" aria-hidden="true">
            <div class="modal-dialog">
                <div class="modal-content">
                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
                        <h4 class="modal-title">编辑</h4>
                    </div>
                    <div class="modal-body">
                        <div class="account">

                            <form method="post" novalidate >
                                <div class="form-group">
                                    <label>真实姓名</label>
                                    <input type="text" v-model="form.realName" class="form-control" placeholder="请输入用户名">
                                </div>
                            </form>
                        </div>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button><!--弹窗的尾部-->
                        <button type="button" class="btn btn-primary" data-dismiss="modal" @click="save">保存</button>
                    </div>
                </div>
            </div>
        </div>
        <div class="modal fade" id="admin_add" tabindex="-1" role="dialog" aria-labelledby="admin_add" aria-hidden="true">
            <div class="modal-dialog">
                <div class="modal-content">
                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
                        <h4 class="modal-title">新建管理员</h4>
                    </div>
                    <div class="modal-body">
                        <div class="account">

                            <form method="post" novalidate>

                                <div class="form-group">
                                    <label>用户名</label>
                                    <input type="text" class="form-control" placeholder="请输入用户名">
                                </div>


                            </form>
                        </div>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button><!--弹窗的尾部-->
                        <button type="button" class="btn btn-primary ">保存</button>
                    </div>
                </div>
            </div>
        </div>



    </div>
</div>

<script>
    new Vue({
        el:"#app",
        data:{
            query:{
                realName:"",//姓名
                userState:"",//开始年龄
            },
            tableData: [],//主体数据
            form:{ //表单
                id:"",
                userName:"",//用户名
                realName:"",//真实用户名
                userRole:"",//用户类型
                userState:"",//用户状态
            },
            empData: {}, //用来保存点击修改真名后保存的数据
        },watch:{
            //检测多条件的内容
            query: {
                deep:true,
                handler(){
                    //每分每秒检测表单的变化
                    this.initData();
                }
            }
        },methods:{
            initData(){ //主体数据展示
                axios.get(`tbadmin?realName=${this.query.realName}&userState=${this.query.userState}`).then(res=>{
                    this.tableData = res.data.data;
                });
            },totypeone(id){ //启用
               axios.get(`tbadmin/uptone?id=`+id).then(res=>{
                  this.initData();
               });
            },
            totypetwo(id){ //禁用
                axios.get(`tbadmin/upttwo?id=`+id).then(res=>{
                    this.initData();
                });
            },
            upt(emp){  //修改
                this.empData = emp;
                this.form = JSON.parse(JSON.stringify(this.empData));
                //传换成不同对象
            },
            save(){  //修改页面具体实现
                //发起请求
                this.form.id = this.empData.id;
                axios.post(`tbadmin/save`,this.form).then(res=>{
                    this.initData();
                });
            },
            initFormData(){ //清空表单
                this.form={
                    id:"",
                    userName:"",//用户名
                    realName:"",//真实用户名
                    userRole:"",//用户类型
                    userState:"",//用户状态
                };
            }
        },created(){
            this.initData();
         }
    });
</script>
</body>
</html>
